<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:c="http://java.sun.com/jstl/core" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich" xmlns:converge="http://com.interactivemediamanagement.converge/tags">

    <c:if test="#{newsItem.fieldVisible['METADATA']}">

        <converge:moduleHeader moduleTitle="#{msgs.newsitem_META_DATA}" id="moduleMetaData">
            <ui:define name="module_options">
            </ui:define>
        </converge:moduleHeader>

        <div class="moduleContent">

            <a4j:region>
                <h:panelGrid columns="3" rendered="#{value.currentActor &amp;&amp; !value.readOnly}">
                    <h:column>

                        <h:inputText id="txtNewConcept" value="#{newsItem.newConcept}" styleClass="text mediumInput" />
                        <rich:suggestionbox id="sbNewConcept" for="txtNewConcept" var="result" suggestionAction="#{newsItem.onConceptSuggestion}" ajaxSingle="true" fetchValue="#{result.name}" minChars="2" nothingLabel="No match">
                            <h:column>
                                <h:outputText value="#{result.name}" />
                            </h:column>
                            <h:column>
                                <c:set var="key" value="#{result.type}_SHORT" />
                                <h:outputText value="#{msgs[key]}" styleClass="concept_#{msgs[key]}" style="width: 30px" />
                            </h:column>
                        </rich:suggestionbox>
                    </h:column>

                    <a4j:commandButton styleClass="button dynamicButton" value="#{msgs.ADD}" actionListener="#{newsItem.onAddConcept}" reRender="dtConcepts,mpNewConcept,txtNewConcept,sbNewConcept" oncomplete="if (#{!newsItem.conceptAdded}){ #{rich:component('mpNewConcept')}.show(); return false; }" />
                    <a4j:commandButton styleClass="button dynamicButton" value="#{msgs.SUBJECTS}" reRender="pgConceptSelector" oncomplete="#{rich:component('mpConceptSelector')}.show();" />
                </h:panelGrid>



                <rich:dataTable id="dtConcepts" var="concept" value="#{newsItem.selectedNewsItem.concepts}" rowClasses="odd, even" style="width: 100%; border: 0px;">
                    <rich:column style=" border: 0px; width: 20px;" rendered="#{value.currentActor &amp;&amp; !value.readOnly}">
                        <a4j:commandLink reRender="dtConcepts">
                            <f:setPropertyActionListener target="#{newsItem.removeConcept}" value="#{concept}" />
                            <h:graphicImage url="#{res.REMOVE_ICON}" />
                        </a4j:commandLink>
                    </rich:column>

                    <rich:column style="width: 26px;  border: 0px;" styleClass="center">
                        <c:set var="key" value="#{concept.type}_SHORT" />
                        <h:outputText value="#{msgs[key]}" styleClass="concept_#{msgs[key]}" style="width: 30px" />
                    </rich:column>

                    <rich:column style=" border: 0px;">
                        <h:outputText value="#{concept.fullTitle}" />
                        <rich:toolTip style="width: 350px;" styleClass="tooltip">
                            <h:panelGrid>
                                <h:outputText styleClass="smallHeading" value="#{concept.name}" />
                                <h:outputText value="#{concept.definition}" escape="false" />
                            </h:panelGrid>
                        </rich:toolTip>
                    </rich:column>
                </rich:dataTable>


                <h:panelGroup id="pgConceptSelector" rendered="#{value.currentActor &amp;&amp; !value.readOnly}">
                    <rich:modalPanel id="mpConceptSelector" autosized="true" domElementAttachment="parent">
                        <f:facet name="header">
                            <h:panelGroup>
                                <h:outputText value="#{msgs.concepts_SELECT_META_DATA}" />
                            </h:panelGroup>
                        </f:facet>
                        <f:facet name="controls">
                            <h:panelGroup>
                                <h:graphicImage id="imgCloseMetaDataSelect" value="#{res.DIALOGUE_CLOSE_ICON}" styleClass="link" />
                                <rich:componentControl for="mpConceptSelector" attachTo="imgCloseMetaDataSelect" operation="hide" event="onclick"/>
                            </h:panelGroup>
                        </f:facet>

                        <h:panelGrid id="pgMetaDataSelect" style="width: 480px;">

                            <rich:tabPanel id="tpMetaDataSelect" switchType="client" activeTabClass="tabActive" inactiveTabClass="tabInactive">
                                <rich:tab id="tabSubjects" label="#{msgs.concepts_SUBJECTS}">

                                    <h:panelGrid id="pgSubjects" columnClasses="tabSheet" style="padding: 10px; width: 100%">
                                        <h:panelGroup styleClass="scrollableContent" layout="block">
                                            <rich:tree switchType="ajax" ajaxSingle="true" ajaxSubmitSelection="true" nodeSelectListener="#{newsItem.onSelectSubject}" reRender="dtConcepts">
                                                <rich:recursiveTreeNodesAdaptor roots="#{common.parentSubjects}" var="item" nodes="#{item.narrower}" >
                                                    <rich:treeNode>
                                                        <h:outputText value=" #{item.name}" />
                                                        <rich:toolTip style="width: 350px;" styleClass="tooltip" showDelay="1000">
                                                            <h:panelGrid>
                                                                <h:outputText styleClass="smallHeading" value="#{item.name}" />
                                                                <h:outputText value="#{item.definition}" escape="false" />
                                                            </h:panelGrid>
                                                        </rich:toolTip>
                                                    </rich:treeNode>
                                                </rich:recursiveTreeNodesAdaptor>
                                            </rich:tree>
                                        </h:panelGroup>
                                    </h:panelGrid>
                                </rich:tab>
                            </rich:tabPanel>

                            <h:panelGroup styleClass="dialogueButtons">
                                <h:commandLink id="lnkCloseConceptSelector" styleClass="dialogButton" value="#{msgs.CLOSE}" onclick="#{rich:component('mpConceptSelector')}.hide(); return false;" />
                            </h:panelGroup>
                        </h:panelGrid>
                    </rich:modalPanel>
                </h:panelGroup>

                <rich:modalPanel id="mpNewConcept" autosized="true" domElementAttachment="parent">
                    <f:facet name="header">
                        <h:panelGroup>
                            <h:outputText value="#{msgs.concepts_NEW_CONCEPT}" />
                        </h:panelGroup>
                    </f:facet>
                    <f:facet name="controls">
                        <h:panelGroup>
                            <h:graphicImage id="imgCloseNewConcept" value="#{res.DIALOGUE_CLOSE_ICON}" styleClass="link" />
                            <rich:componentControl for="mpNewConcept" attachTo="imgCloseNewConcept" operation="hide" event="onclick"/>
                        </h:panelGroup>
                    </f:facet>

                    <h:panelGrid id="pgNewConcept" style="width: 480px;">

                        <rich:tabPanel id="tpNewConcept" switchType="client" activeTabClass="tabActive" inactiveTabClass="tabInactive">

                            <rich:tab id="tabNewConcept" label="New Concept">

                                <h:panelGrid id="pgDetails" columnClasses="tabSheet" style="padding: 10px; width: 100%">
                                    <h:outputText value="#{msgs.concepts_CONCEPT_TYPE}" />
                                    <h:selectOneRadio value="#{newsItem.conceptType}">
                                        <f:selectItem itemLabel="#{msgs['dk.i2m.converge.core.metadata.Organisation_NAME']}" itemValue="ORGANISATION" />
                                        <f:selectItem itemLabel="#{msgs['dk.i2m.converge.core.metadata.Person_NAME']}" itemValue="PERSON" />
                                        <f:selectItem itemLabel="#{msgs['dk.i2m.converge.core.metadata.GeoArea_NAME']}" itemValue="LOCATION" />
                                        <f:selectItem itemLabel="#{msgs['dk.i2m.converge.core.metadata.PointOfInterest_NAME']}" itemValue="POI" />
                                    </h:selectOneRadio>

                                    <h:outputText value="#{msgs.concepts_CONCEPT}" />
                                    <h:inputText value="#{newsItem.newConceptName}" styleClass="text mediumInput" />

                                    <h:outputText value="#{msgs.concepts_DEFINITION}" />
                                    <h:inputTextarea value="#{newsItem.newConceptDescription}" styleClass="text mediumTextArea" />
                                </h:panelGrid>
                            </rich:tab>
                        </rich:tabPanel>

                        <h:panelGroup styleClass="dialogueButtons">
                            <a4j:commandLink id="lnkAddNewConcept" styleClass="dialogButton" value="#{msgs.ADD}" actionListener="#{newsItem.onAddNewConcept}" reRender="dtConcepts,txtNewConcept,sbNewConcept" oncomplete="if (#{converge:isAllValid()}){ #{rich:component('mpNewConcept')}.hide(); return false; }" />
                            <h:commandLink id="lnkCloseNewConcept" styleClass="dialogButton" value="#{msgs.CANCEL}" onclick="#{rich:component('mpNewConcept')}.hide(); return false;" />
                        </h:panelGroup>
                    </h:panelGrid>
                </rich:modalPanel>

            </a4j:region>
        </div>
        <div style="clear: both; padding-bottom: 12px;"></div>
    </c:if>
</ui:composition>